<template>
  <div class="searchList" ref="searchList">
    <div class="navList">
      <ul>
        <li
          class="cp"
          v-for="item in navList"
          :key="item.key"
          :class="selected === item.key ? 'selected' : ''"
          @click="changeSearchNav(item.key)"
        >
          {{ item.value }}
        </li>
      </ul>
    </div>
    <div class="contentList">
      <div class="content">
        <section v-for="(item, index) in currentData" :key="item.part">
          <div class="seccontent">
            <div class="part" v-if="selected !== 'all' || item.recordList.length">{{ item.part }}</div>
            <single-record
              v-for="it in item.recordList"
              :key="it.id"
              :id="it.id"
              :fileType="it.fileType"
              :words="it.words"
              :name="it.name"
              :imgID="it.imgID"
              @dblclick.native="jumpToChat(it.id, it.fileType)"
            ></single-record>
            <div class="nodataTips" v-if="selected !== 'all' && !item.recordList.length">暂无搜索内容</div>
            <div class="nodataTips" v-if="selected === 'all' && !contentData.length">暂无搜索内容</div>
            <div class="more cp" v-if="selected === 'all' &&  contentData[index] && contentData[index].recordList.length > 3" @click="viewAll(item.part, item.show)">{{item.show?'查看全部('+ contentData[index].recordList.length +')' : '收起'}}</div>
          </div>
          <div class="gap" v-if="selected === 'all' && index !== contentData.length - 1"></div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import singleRecord from './singleRecord'
export default {
  components: {
    singleRecord
  },
  data () {
    return {
      selected: 'all',
      navList: [
        { key: 'all', value: '全部' },
        { key: 'contacts', value: '联系人' },
        { key: 'groups', value: '群组' }
        // { key: 'chatRecord', value: '聊天记录' }
      ],
      contentData: [], // 总数据
      currentData: [] // 展示数据
    }
  },
  computed: {
    searchList () {
      return this.$store.state.system.searchList
    }
  },
  watch: {
    searchList: {
      deep: true,
      immediate: true,
      handler (val) {
        this.changeSearchNav(this.selected)
      }
    }
  },
  methods: {
    viewAll (part, show) {
      this.currentData.forEach(item => {
        if (item.part === part) {
          item.recordList = show ? this.contentData.filter(it => it.part === part)[0].recordList : this.contentData.filter(it => it.part === part)[0].recordList.slice(0, 3)
          item.show = !show
        }
      })
    },
    // 跳转聊天
    jumpToChat (id, fileType) {
      this.$store.commit('chatInformation/set_current_contact', {
        id: id,
        id_type: fileType === 1 ? 1 : 2
      })
      this.$refs.searchList.__vue__.$parent.keyword = ''
      this.$refs.searchList.__vue__.$parent.toggleShowSearch()
    },
    changeSearchNav (nav) { // 切换导航
      this.selected = nav
      const newData = []
      switch (nav) {
        case 'contacts':
          this.contentData = [
            {
              part: '联系人',
              recordList: this.searchList.Contacts
            }
          ]
          break
        case 'groups':
          this.contentData = [
            {
              part: '群组',
              recordList: this.searchList.Groups
            }
          ]
          break
        case 'chatRecord':
          this.contentData = [
            {
              part: '聊天记录',
              recordList: [
                // { name: '火影忍者', words: 'xxxxxxx' },
                // { name: '火影忍者', words: 'xxxxxxx' },
                // { name: '火影忍者', words: 'xxxxxxx' },
                // { name: '火影忍者', words: 'xxxxxxx' },
                // { name: '火影忍者', words: 'xxxxxxx' },
                // { name: '火影忍者', words: 'xxxxxxx' }
              ]
            }
          ]
          break
        default:
          if (this.searchList.Contacts && this.searchList.Contacts.length) {
            newData.push({
              part: '联系人',
              recordList: this.searchList.Contacts
            })
          }
          if (this.searchList.Groups && this.searchList.Groups.length) {
            newData.push({
              part: '群组',
              recordList: this.searchList.Groups
            })
          }
          this.contentData = newData
          this.currentData = this.contentData.map(item => {
            return {
              show: true,
              part: item.part,
              recordList: item.recordList && item.recordList.length > 3 ? item.recordList.slice(0, 3) : item.recordList
            }
          })
          break
      }
      if (nav !== 'all') {
        this.currentData = this.contentData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.searchList {
  width: 360px;
  height: 640px;
  position: absolute;
  bottom: -640px;
  // background: plum;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0px 4px 24px 0px #d8dee9;
  .navList {
    padding-left: 24px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ebedf3;
    ul {
      overflow: hidden;
      li {
        position: relative;
        margin-right: 30px;
        height: 47px;
        float: left;
        line-height: 47px;
        color: #0D172C;
        font-size: 12px;
      }
      li.selected {
        color: #304eec;
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 20px;
          height: 2px;
          background-color: #304eec;
        }
      }
    }
  }
  .contentList {
    height: calc(100% - 48px);
    .content {
      overflow: auto;
      height: 100%;
      &::-webkit-scrollbar {
        width: 4px;
        height: 180px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #d8dee9;
        border-radius: 2px;
      }
      section {
        .seccontent {
          padding-left: 15px;
          .part {
            padding: 13px 0 4px;
            font-size: 12px;
            color: #9eaac4;
            border-bottom: 1px solid #ebedf3;
          }
          .more {
            padding: 8px 0;
            font-size: 12px;
            text-decoration: underline;
            color: #304eec;
          }
          .nodataTips{
            margin-top: 130px;
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: center;
            color: #5f7196;
            line-height: 17px;
          }
        }
      }
      .gap {
        height: 8px;
        background-color: #f6f7fb;
      }
    }
  }
}
</style>
